.floor-planDetail-container {

}

.floor-planDetail-container.open .floor-planDetail-wrap {
    transform: translate(0, 0);
}

.floor-planDetail-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    transform: translate(100%, 0);
    transition: all .3s;
}

.floor-planDetail {
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
}

.floor-planDetail .floor-planDetail-img {
    width: 100%;
    height: 100%;
}

.floor-planDetail-mapItem {
    z-index: 1000;
    width: 25px;
    height: 25px;
    transform-origin: center;
    cursor: pointer;
    background: url(/vr/images/not_active_marker.png) no-repeat;
    background-size: contain;
}

.floor-planDetail-mapItem.active {
    background: url(/vr/images/active_marker.png) no-repeat;
    background-size: contain;
}

/*.floor-planDetail-mapItem:hover {*/
/*    background-color: #F8BC25;*/
/*}*/

.floor-planDetail-footer {
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

.floor-planDetail-footer .floor-plan-footerIcon {
    cursor: pointer;
    border-radius: 50%;
}

.floor-planDetail-footer .floor-plan-footerIcon:first-child {
    margin-right: 64px;
}

.floor-planDetail-openWrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    padding: 5px;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.floor-planDetail-open {
    width: 14px;
    font-size: 14px;
}

.floor-planDetail-openIcon {
    transform: rotate(-180deg);
}

.floor-plan-detail-layer-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
}

.floor-plan-detail-closeIcon {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.floor-plan-detail-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}